<template>
  <div class="detail" v-if="detail.date">
    <div class="word">{{ word }}</div>
    <div class="date">
      {{ detail.date }}
    </div>
    <div class="content">
      <el-row>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <div class="tmp">{{ detail.minTmp }}°~{{ detail.maxTmp }}°</div>
          <div class="text">{{ detail.text }}</div>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <img class="img" :src="imgUrl(detail.code)" />
        </el-col>
      </el-row>
    </div>
    <el-row>
      <el-col :xs="12" :sm="8" :md="4" :lg="4" :xl="4">
        <detailContent
          :data="detail.windSc"
          :title="detail.windDir"
          more="级"
        />
      </el-col>
      <el-col :xs="12" :sm="8" :md="4" :lg="4" :xl="4">
        <detailContent :data="detail.pcpn" title="降水量" more="mm" />
      </el-col>
      <el-col :xs="12" :sm="8" :md="4" :lg="4" :xl="4">
        <detailContent :data="detail.uv" title="紫外线" />
      </el-col>
      <el-col :xs="12" :sm="8" :md="4" :lg="4" :xl="4">
        <detailContent :data="detail.hum" title="相对湿度" more="%" />
      </el-col>
      <el-col :xs="12" :sm="8" :md="4" :lg="4" :xl="4">
        <detailContent :data="detail.sunRise" title="日出" />
      </el-col>
      <el-col :xs="12" :sm="8" :md="4" :lg="4" :xl="4">
        <detailContent :data="detail.sunSet" title="日落" />
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import detailContent from "@/components/weather30/detail-content.vue";

import { imgUrl } from "@/utils/imgUrl";

const props = defineProps({
  detail: {
    type: Object,
  },
  word: {
    type: String,
  },
});
</script>

<style lang="less" scoped>
.detail {
  padding: 19px 20px;
  margin-bottom: 16px;
  border-radius: 16px;
  background-color: #f7f8f9;
  .word {
    margin: 0 auto;
    max-width: 720px;
    min-height: 42px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
  }
  .date {
    padding: 10px 20px 14px;
    border-bottom: 1px solid #e5eaef;
    font-size: 15px;
    font-weight: 300;
  }
  .content {
    padding: 16px 20px 14px;
    text-align: center;
    .tmp {
      margin-top: 20px;
      font-size: 22px;
      font-weight: 700;
    }
    .text {
      margin: 5px auto 10px;
      font-size: 20px;
    }

    .img {
      margin-left: 30px;
      height: 80px;
    }
  }
}
</style>